.wdmb-Drawer {
    position: fixed;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    overflow: hidden; // transition: width .3s ease 0s;
    &.wdmb-Drawer-show {
        width: 100%;
    }
    .wdmb-Drawer-Container {
        width: 100%;
        height: 100%;
        position: relative;
        .wdmb-Drawer-stepsContent {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform .3s ease 0s;
            .wdmb-Drawer-mask {
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                position: absolute;
            }
            .wdmb-Drawer-wraper {
                height: 100%;
                box-shadow: -2px 0px 20px 0 #ccc;
                background-color: #fff;
                position: absolute;
                top: 0;
            } 
            // 左侧出
            &.wdmb-Drawer-left {
                transform: translateX(-100%);
                .wdmb-Drawer-wraper {
                    left: 0;
                }
            } 
            // 右侧出
            &.wdmb-Drawer-right {
                transform: translateX(100%);
                .wdmb-Drawer-wraper {
                    right: 0;
                }
            }
            &.wdmb-Drawer-stepShow {
                transform: translateX(0);
            }
        }
    }
}
